<template>
  <div class="map-tools-container">
    <dl
      v-for="(item, index) in tools"
      :key="index"
      :class="getClassName(index)"
      @click="handle_function_call(item.action, index)"
    >
      <dt class="iconfont" :class="'icon-' + item.icon" />
      <dd>{{ item.name }}</dd>
    </dl>
  </div>
</template>

<script>
  export default {
    name: 'MapTools',
    data() {
      return {
        activeIndex: '',
        tools: [
          {
            icon: 'kongzhi',
            name: '设备控制',
            action: 'showControl',
          },
          {
            icon: 'lunguanzu',
            name: '决策查看',
            action: 'showPolicy',
          },
          {
            icon: 'plan',
            name: '日志查看',
            action: 'showLog',
          },
          {
            icon: 'fenqu',
            name: '分区管理',
            action: 'showPartition',
          },
        ],
      }
    },
    methods: {
      handle_function_call(function_name, index) {
        this.activeIndex = index
        this.$emit(function_name)
      },
      getClassName(index) {
        return index === this.activeIndex ? 'active' : ''
      },
    },
  }
</script>

<style lang="scss" scoped></style>
